// Excellent
import "@/style/page/index.scss";
import { Button, Col, Row, Flex, Typography } from "antd";
import { RightOutlined } from '@ant-design/icons';
const { Paragraph } = Typography;


const dataList = [
    {
        title: "技术强硬",
        img: require("@/assets/index/banner.png"),
        content: "这是一条简介这是一条简介这是一条简介这是一条简介这是一条简介这是一条简介这是一条简介这是一条简介",
    },
    {
        title: "技术强硬",
        img: require("@/assets/index/banner.png"),
        content: "10年+大厂开发经验，技术更强硬",
    },
    {
        title: "技术强硬",
        img: require("@/assets/index/banner.png"),
        content: "10年+大厂开发经验，技术更强硬",
    },
    {
        title: "技术强硬",
        img: require("@/assets/index/banner.png"),
        content: "10年+大厂开发经验，技术更强硬",
    },
];
function Excellent(props) {
    return (
        <div className="Excellent">
            <div className="ExcellentContent">
                <Row gutter={16}>
                    {dataList.map((item, index) => (
                        <Col
                            span={24 / dataList.length}
                            key={"excellent_item" + index}
                        >
                            <div className="ExcellentContentItem">
                                <img
                                    alt="avatar"
                                    src={item.img}
                                    className="ExcellentContentIcon"
                                />
                                <Flex
                                    vertical
                                    align="flex-start"
                                    justify="space-between"
                                    className="ExcellentContentItemContent"
                                >
                                    <Typography.Title level={3}>
                                        {item.title}
                                    </Typography.Title>
                                    <Paragraph>{item.content}</Paragraph>
                                    
                                </Flex>
                                <Button className="ExcellentContentItemButton" color="primary" variant="text" iconPosition={"end"} icon={<RightOutlined />} > 查看详情</Button>
                            </div>
                        </Col>
                    ))}
                </Row>
            </div>
        </div>
    );
}

export default Excellent;
